<template>
  <view class="index">
    <!-- 1.0 搜索栏 start -->
    <ygSearch></ygSearch>
    <!-- 1.0 搜索栏 end -->

    <!-- 2.0 轮播图 start -->
    <view class="swiper">
      <u-swiper
        :list="swiperList"
        height="340"
      ></u-swiper>
    </view>
    <!-- 2.0 轮播图 end -->

    <!-- 3.0 导航 start -->
    <view class="nav">
      <navigator
        class="nav_item"
        v-for="item in catitems"
        :key="item.image_src"
      >
        <image
          :src="item.image_src"
          mode="widthFix"
        ></image>
      </navigator>
    </view>
    <!-- 3.0 导航 end -->

    <!-- 4.0 楼层 start -->
    <view class="floor">
      <!-- 时尚女装 -->
      <view
        class="floor_group"
        v-for="(item,index) in floordata"
        :key="index"
      >
        <!-- 标题 -->
        <view class="floor_group_title">
          <image
            mode="widthFix"
            :src="item.floor_title.image_src"
          ></image>
        </view>
        <!-- 内容列表 -->
        <div class="floor_group_list">
          <navigator
            class="floor_item"
            v-for="item2 in item.product_list"
            :key="item2.image_src"
          >
            <image :src="item2.image_src"></image>
          </navigator>
        </div>
      </view>
    </view>
    <!-- 4.0 楼层 end -->

  </view>
</template>

<script>
/* 
1 在合适的位置(onLoad 生命周期  ) 发送异步请求(uni.request) 获取数据
2 数据获取回来  是否需要处理数据的格式
3 数据 传递到 data中即可 

1 轮播图高度和图片高度的设置
	1 轮播图的高度一致和图片高度一样  
		原图的宽 /  原图的高 =  屏幕改变后的图片的宽 /  屏幕改变后的图片的高
		750 / 340 = 屏幕改变后的图片的宽 (100vw 750rpx)
		750 / 340 = 屏幕改变后的图片的宽  750rpx / 340rpx
 */
export default {
  data() {
    return {
      // 轮播图数组
      swiperList: [],
      // 导航数组
      catitems: [],
      // 楼层
      floordata: [],
    };
  },
  onLoad() {
    // 1 获取渲染轮播图
    this.getSwiper();
    // 2 获取渲染导航
    this.getCatitems();
    // 3 获取渲染楼层
    this.getFloordata();
  },
  methods: {
    /**
     * 获取渲染轮播图
     */
    async getSwiper() {
      const { message } = await this.$u.api.getSwiperdata();
      const swiperList = message.map((v) => ({ ...v, image: v.image_src }));
      this.swiperList = swiperList;
    },

    /**
     * 获取渲染导航数据
     */
    async getCatitems() {
      const { message } = await this.$u.api.getCatitems();
      this.catitems = message;
    },
    /**
     * 获取渲染楼层
     */
    async getFloordata() {
      const { message } = await this.$u.api.getFloordata();
      this.floordata = message;
    },
  },
};
</script>

<style lang="scss" >
/* 导航 */
.nav {
  display: flex;
  .nav_item {
    flex: 1;
    padding: 20rpx;
  }
}

/* 楼层 */
.floor {
  .floor_group {
    .floor_group_title {
      image {
      }
    }

    .floor_group_list {
      /* 清除浮动 */
      overflow: hidden;
      .floor_item {
        float: left;
        image {
          width: 250rpx;
          height: 207.97413793103448rpx;
        }
      }
      .floor_item:nth-child(1) {
        image {
          height: 415.94827586206895rpx;
        }
      }
      /* 后四张图片加左边框 */
      .floor_item:nth-last-child(-n + 4) {
        image {
          border-left: 4rpx solid #fff;
        }
      }
      /* 后两张图片加上边框 */
      .floor_item:nth-last-child(-n + 2) {
        image {
          border-top: 4rpx solid #fff;
        }
      }
    }
  }
}
</style>

